<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <title>全国城市海选报名</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="__STATIC__/webapp/css/mui.min.css" rel="stylesheet"/>
    <link href="__STATIC__/webapp/css/from.css" rel="stylesheet"/>
    <script type="text/javascript" src="__STATIC__/webapp/js/jquery-1.11.0.js"></script>
    <script src="__STATIC__/webapp/js/mui.js"></script>
    <link href="__STATIC__/webapp/js/dialog/dialog.css" type="text/css" rel="stylesheet">
    <script src="__STATIC__/webapp/js/dialog/dialog.js"></script>
    <script src="__STATIC__/webapp/js/confirm.js"></script>

    <link href="__STATIC__/webapp/js/picker_mui/picker.css" rel="stylesheet"/>
    <link href="__STATIC__/webapp/js/picker_mui/mui.picker.min.css" rel="stylesheet"/>

    <script src="__STATIC__/webapp/js/picker_mui/mui.picker.js"></script>
    <script src="__STATIC__/webapp/js/picker_mui/mui.poppicker.js"></script>
    <script src="__STATIC__/webapp/js/picker_mui/mui.picker.min.js"></script>

</head>
<body>

<style type="text/css">
    body {
        background: #FFFFFF;
        overflow-x: hidden;
    }

    header.mui-bar {
        background-color: #242736;
        color: #FFF;
    }

    header.mui-bar .mui-title {
        color: #FFF;
        font-size: 15px;
    }

    div.mui-card {
        width: 90%;
        margin: 0 auto
    }

    input#btn {
        position: absolute;
        z-index: 2;
        top: 4px;
        right: 25px;
        font-size: 12px;
        background: #F25F31;
        width: 85px;
        padding: 0 5px;
        height: 28px;
        color: #FFF;
        border-radius: 5px;;
    }

    .mui-input-group:before {
        height: 0;
    }

    .okBtn {
        border: none;
        width: 250px;
        height: 37px;
        margin: 0 auto;
        display: block;
        margin-top: 30px;
        margin-bottom: 30px
    }

    div.filter_bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        z-index: 100;
        display: none;
    }

    div.conDialog {
        position: fixed;
        width: 86%;
        height: 420px;
        top: 14%;
        z-index: 9999;
        left: 7%;
        background: #FFF;
        background-size: 100%;
        border-radius: 10px;
        border-radius: 20px;
        overflow: hidden;
        display: none;
    }

    p.tit {
        text-align: center;
        background-color: #242736;
        height: 40px;
        margin-top: 0px;
        color: #FFF;
        line-height: 40px;
        font-size: 14px;
    }

    div.mzCon {
        line-height: 1.5;
        font-size: 12px;
        padding: 8px; height: 70%;
        overflow: hidden;
    }

    button.poss {
        position: absolute;
        bottom: 10px;
        margin: 0 auto;
        width: 40%;
        left: 9%;
    }
    button.upload_cancle {
        background: #404040;
        border: 1px solid #404040;
        position: absolute;
        bottom: 10px;
        margin: 0 auto;
        width: 40%;
        right: 9%;
    }
    .test{
        width: 98%;
        height: 370px;
        overflow: auto;
        margin: 5px;
    }
    .scrollbar{
        width: 90%;
        height: 360px;
        margin: 0 auto;
    }


    .test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
    .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 5px;
        background: #EDEDED;
    }

    .scrollbar b.f{
        color: #cf5012;
    }
    .scrollbar span.vis{
        visibility: hidden;
    }
    .scrollbar span.fl{
        margin-left:1px;
    }
</style>

<a href="{:url('webapi/user/user_center')}">
    <header id="mui-color" style="background: #242736" class="mui-bar mui-bar-nav">
        <div class="mui-icon  mui-icon-left-nav mui-pull-left lotteryBack"></div>
        <h1 class="mui-title">2018亚洲新人赛上海赛区报名</h1>
    </header>
</a>

<div class="filter_bg"></div>

<div id="conDialog" class="conDialog">
    <p class="tit">{$article[1]['title']}</p>
    <div class="mzCon">
        <div class="test test-1">
            <div class="scrollbar" id="article_con_show">

            </div>
        </div>
    </div>
    <button id="confirm_update_button" type="button" class="mui-btn mui-disabled mui-btn-primary poss" onclick="checkForm(this);">确认报名&nbsp;(<b id="after_timer">10</b>)&nbsp;</button>
    <button id="update_cancle" type="button" class="mui-btn mui-btn-primary upload_cancle" >取消</button>
</div>


<div style="padding-top:70px;">
    <div class="mui-content">

        <div class="mui-content-padded" style="margin: 0 5px;width: 105%;margin-left: -5px;">
            <form class="mui-input-group test2">
                <div class="mui-input-row">
                    <label>姓名</label>
                    <input type="text" class="mui-input-clear" id="userName" placeholder="请输入您的姓名" value="{$vo.name}">
                </div>

                <div class="mui-input-row">
                    <label>性别</label>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input {if ($vo.sex== 1)}checked{/if} name="sex" value="1" type="radio">
                        <label style="padding-right: 50px;">男</label>
                    </div>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input {if ($vo.sex== 0)}checked{/if} name="sex" value="0" type="radio">
                        <label style="padding-right: 50px;">女</label>
                    </div>
                </div>

                <div class="mui-input-row">
                    <label>身份证号码</label>
                    <input type="text" class="mui-input-clear" id="identityNum"
                           placeholder="请输入您的身份证号码">
                </div>

                <div class="mui-input-row">
                    <label>手机号码</label>
                    <input type="number" class="mui-input-clear" id="phone" value="{$vo.phone_num}"
                           placeholder="请输入您的手机号码">
                </div>

                <div class="mui-input-row" style="position: relative">
                    <label class="iconfont_log_reg icon-youjian">短信验证码</label>
                    <input type="text" placeholder="请输入短信验证码" id="u_code">
                    <input type="button" id="btn" value="获取验证码" onclick="send_sms(this)"/>
                </div>


                <div class="mui-input-row">
                    <label>组类型</label>
                    <input type="text" id="groupType" readonly placeholder="请选择组类型">
                </div>

                <div class="mui-input-row">
                    <label>参赛方式</label>
                    <input type="text" id="joinType" readonly placeholder="请选择参赛方式">
                </div>

                <div id="groupJoin" class="hidden">
                    <div class="mui-input-row">
                        <label>组合名</label>
                        <input type="text" id="groupName" class="mui-input-clear" placeholder="请输入组合名称">
                    </div>
                    <div class="mui-input-row">
                        <label>组合人数</label>
                        <input type="number" id="groupNum" class="mui-input-clear" placeholder="请输入组合人数">
                    </div>
                </div>

                <div class="mui-input-row">
                    <label>是否有乐器</label>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input value="1" checked name="is_possess_music" type="radio">
                        <label style="padding-right: 50px;">是</label>
                    </div>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input value="0" name="is_possess_music" type="radio">
                        <label style="padding-right: 50px;">否</label>
                    </div>
                </div>

                <div class="mui-input-row">
                    <label>乐器名称</label>
                    <input type="text" class="mui-input-clear" id="music_instruments" placeholder="请输入乐器名称">
                </div>

                <div class="mui-input-row">
                    <label>是否有原创</label>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input value="1" checked name="is_original" type="radio">
                        <label style="padding-right: 50px;">是</label>
                    </div>

                    <div style="display: inline-block;" class="mui-input-row mui-radio">
                        <input value="0" name="is_original" type="radio">
                        <label style="padding-right: 50px;">否</label>
                    </div>
                </div>

                <div class=" groupModel mui-card hidden">
                    <div style="padding:5px;">
                        <h5 class="mui-content-padded">请选择参赛种类:</h5>
                    </div>

                    <div class="mui-input-row mui-checkbox">
                        <label>唱歌</label>
                        <input class="check" name="matchType" value="唱歌" type="checkbox">
                    </div>
                    <div class="mui-input-row mui-checkbox">
                        <label>舞蹈</label>
                        <input class="check" name="matchType" value="舞蹈" type="checkbox">
                    </div>

                    <div class="juvenile hidden">
                        <div class="mui-input-row mui-checkbox">
                            <label>乐器</label>
                            <input class="check" name="matchType" value="乐器" type="checkbox">
                        </div>

                        <div class="mui-input-row mui-checkbox">
                            <label>走秀</label>
                            <input class="check" name="matchType" value="走秀" type="checkbox">
                        </div>
                    </div>
                </div>



                <div class="mui-card">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-collapse mui-active">
                            <a class="mui-navigate-right"><b style="color:#FF6C3C;">{$article[0]['title']}</b></a>
                            <div class="mui-collapse-content" id="bmxz_show">

                            </div>
                        </li>
                    </ul>
                </div>

                <!--<button type="button" class="mui-btn mui-btn-primary okBtn" onclick="checkForm(this);">确认</button>-->
                <button id="xyM" type="button" class="mui-btn mui-btn-primary okBtn" onclick="javascript:void (0)">确认</button>
                &nbsp;&nbsp;<br/><br/><br/>
                &nbsp;&nbsp;
            </form>

        </div>
    </div>
</div>

<div id="bmxz" style="display: none">{$article[0]['content']|default=''|raw}</div>
<div id="article_con" style="display: none">{$article[1]['content']|default=''|raw}</div>
<script type="text/javascript">

    (function ($, doc) {
        $.init();
        $.ready(function () {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function (obj, param) {
                return obj[param] || '';
            };

            /**
             *  组类型
             */
            var groupTypePicker = new $.PopPicker();
            groupTypePicker.setData([{
                text: '少年组（4-16岁）'
            }, {
                text: '成人组（17-28岁）'
            }]);
            var groupType = doc.getElementById('groupType');
            groupType.addEventListener('tap', function (event) {
                groupTypePicker.show(function (items) {

                    groupType.value = items[0].text;

                    jQuery('.groupModel').show();

                    if (items[0].text == '少年组（4-16岁）') {
                        jQuery(".juvenile").show();

                    } else if (items[0].text == '成人组（17-28岁）') {
                        jQuery(".juvenile").hide();
                    }
                });
            }, false);

            /**
             * 参赛形式选择
             */
            var userPicker = new $.PopPicker();
            userPicker.setData([{
                text: '个人'
            }, {
                text: '组合'
            }]);
            var joinType = doc.getElementById('joinType');
            joinType.addEventListener('tap', function (event) {
                userPicker.show(function (items) {

                    console.log(items[0]);

                    joinType.value = items[0].text;

                    if (items[0].text == '组合') {

                        jQuery("#groupJoin").show();

                    } else if (items[0].text == '个人') {

                        jQuery("#groupJoin").hide();
                    }

                });
            }, false);


        });
    })(mui, document);

    //发送短信
    function send_sms(obj) {
        var phone = $("#phone").val();
        var sms_send = "{:url('webapi/user/send_sms')}";
        var send_data = {
            mobile: phone,
        };
        $.get(sms_send, send_data, function (res) {
        });
        settime(obj);
    }

    var countdown = 60;
    function settime(obj) {

        var phone = $("#phone").val();
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(phone)) {
            mui.toast('请输入正确的手机号码');
            return;
        }


        if (countdown == 0) {
            obj.removeAttribute("disabled");
            obj.value = "免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value = "重新发送(" + countdown + ")";
            countdown--;
        }
        setTimeout(function () {
            settime(obj)
        }, 1000);
    }
    var time_one;
    $("#xyM").click(function () {
        //数据验证
        var userName = $("#userName").val();  //姓名
        var phone = $("#phone").val();  //手机号码
        var identityNum = $("#identityNum").val(); //身份证号码
        //  var joinKind = $("#joinKind").val();
        var joinType = $("#joinType").val();  //参赛方式 个人/组合
        var groupName = $("#groupName").val();  //组名称
        var groupNum = $("#groupNum").val(); //组员人数
        var code = $("#u_code").val();  //验证码
        var groupType = $("#groupType").val(); //组类型

        var is_possess_music = $("input[name='is_possess_music']:checked").val(); //是否有乐器
        var is_original = $("input[name='is_original']:checked").val(); //是否原创
        var matchType = $("input[name='matchType']:checked").val(); //参赛种类
        var sex = $("input[name='sex']:checked").val();

        var music_instruments = $("#music_instruments").val();

        if ($.trim(userName) == '') {
            mui.toast('请输入您的姓名');
            return;
        }

        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(phone)) {
            mui.toast('请输入正确的手机号码');
            return;
        }

        if (identityNum.length != 18) {
            mui.toast('请输入正确的身份证号码');
            return;
        }


        if ($.trim(code) == '') {
            mui.toast('请输入短信验证码');
            return;
        }

        if ($.trim(groupType) == '') {
            mui.toast('请选择组类型');
            return;
        }

        /**************/
        var data2 = [];
        $('.check').each(function (index, item) {

            var isChecked = $(item).is(':checked');

            if (isChecked) {
                data2.push($(item).val());
            }
        });

        if (!data2.length) {
            mui.toast('请选择参赛种类');
            return;
        }

        if ($.trim(joinType) == '') {
            mui.toast('请选择参赛方式');
            return;
        }

        if (is_possess_music == '1' && music_instruments == '') {
            mui.toast('请输入乐器名称');
            return;
        }

        if ($('#groupJoin').css('display') == 'block') {

            if ($.trim(groupName) == '') {
                mui.toast('请输入组合名称');
                return;
            }

            if ($.trim(groupNum) == '') {
                mui.toast('请输入组合人数');
                return;
            }
        }
        //end


        $(".filter_bg").show();
        $("#conDialog").show();
        if(time_one){
            clearTimeout(time_one);
        }
        var i = 10;
        after();
        function after(){
            if($("#confirm_update_button").hasClass("mui-disabled") != true){
                return false;
            }
            $("#after_timer").empty().append(i);
            i=i-1;
            time_one = setTimeout(function(){
                if(i < 0){
                    $("#confirm_update_button").removeClass("mui-disabled");
                    clearTimeout(time_one);
                    return ;
                }
                after();
            },1000);
        }
    });

    $("#update_cancle").click(function () {

        $(".filter_bg").hide();
        $("#conDialog").hide();
    })

    function checkForm(_this) {

        if($(_this).hasClass("mui-disabled")){
            return false;
        }

        var userName = $("#userName").val();  //姓名
        var phone = $("#phone").val();  //手机号码
        var identityNum = $("#identityNum").val(); //身份证号码
        //  var joinKind = $("#joinKind").val();
        var joinType = $("#joinType").val();  //参赛方式 个人/组合
        var groupName = $("#groupName").val();  //组名称
        var groupNum = $("#groupNum").val(); //组员人数
        var code = $("#u_code").val();  //验证码
        var groupType = $("#groupType").val(); //组类型

        var is_possess_music = $("input[name='is_possess_music']:checked").val(); //是否有乐器
        var is_original = $("input[name='is_original']:checked").val(); //是否原创
        var matchType = $("input[name='matchType']:checked").val(); //参赛种类
        var sex = $("input[name='sex']:checked").val();

        var music_instruments = $("#music_instruments").val();

        if ($.trim(userName) == '') {
            mui.toast('请输入您的姓名');
            return;
        }

        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(phone)) {
            mui.toast('请输入正确的手机号码');
            return;
        }

        if (identityNum.length != 18) {
            mui.toast('请输入正确的身份证号码');
            return;
        }


        if ($.trim(code) == '') {
            mui.toast('请输入短信验证码');
            return;
        }

        if ($.trim(groupType) == '') {
            mui.toast('请选择组类型');
            return;
        }

        /**************/
        var data2 = [];
        $('.check').each(function (index, item) {

            var isChecked = $(item).is(':checked');

            if (isChecked) {
                data2.push($(item).val());
            }
        });

        if (!data2.length) {
            mui.toast('请选择参赛种类');
            return;
        }

        if ($.trim(joinType) == '') {
            mui.toast('请选择参赛方式');
            return;
        }

        if (is_possess_music == '1' && music_instruments == '') {
            mui.toast('请输入乐器名称');
            return;
        }

        if ($('#groupJoin').css('display') == 'block') {

            if ($.trim(groupName) == '') {
                mui.toast('请输入组合名称');
                return;
            }

            if ($.trim(groupNum) == '') {
                mui.toast('请输入组合人数');
                return;
            }
        }

        var data = {
            form: 'user_form',
            userName: userName,
            code:code,
            sex: sex,
            phone: phone,
            identityNum: identityNum,
            // joinKind: joinKind,
            joinKind: data2, //报名的项目,既参赛种类
            joinType: joinType,
            groupName: groupName,
            groupNum: groupNum,
            is_possess_music: is_possess_music,
            is_original: is_original,
            match_type: matchType,
            music_instruments: music_instruments,
            groupType: groupType,
        };

        /* console.log(data);
         return;*/


        $(_this).text('正在提交....').css({"background": '#404040'});

        //提交表单
        var updateForm = "{:url('webapi/user/update_form')}";
        $.post(updateForm, data, function (res) {
            console.log(res);
            mui.toast(res.msg);
            $(_this).text('确认').css({"background": '#FF6C3C'});
            if (res.status == 200) {
                //TODO 保存成功操作
                var pay_url = "{:url('webapi/user/pay')}";
                window.location.href = pay_url;
            }
        });
        return;


    }


    var editDdata = document.getElementById('bmxz').innerHTML;
    $("#bmxz_show").html(htmldecode(editDdata));

    var article_con = document.getElementById('article_con').innerHTML;
    $("#article_con_show").html(htmldecode(article_con));

    //html反转义输出
    function htmldecode(string) {
        var div = document.createElement('div');
        div.innerHTML = string;
        return div.innerText || div.textContent;
    }
</script>

{include file="public/weixin_sdk" /}
{include file="public/weixin_share" /}
</body>
</html>